<template>
  <div class="tagsDialog">

    <el-dialog
      title="选择标签"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      width="800px"
    >

      <div class="clearfix">
        <el-col :span="24">
          <el-col :span="12">
            <div>重点内容</div>
          </el-col>
          <el-col :span="12">
            <div>能力提升点</div>
          </el-col>
        </el-col>
      </div>
      <div class="content clearfix"
        style="margin-top: 20px; border-top: 1px solid #ccc; "
      >
        <el-col :span="24" style="border-bottom: 1px solid #ccc;">
          <el-col
            :span="12"
            style="height: 340px; padding: 20px 0; overflow-y: auto;border-left: 1px solid #ccc; border-right: 1px solid #ccc;"
          >
          <el-checkbox-group  v-if="importTagsList.length" v-model="keynote" @change='radioChange' >
            <el-col
              v-for="(item, index) in importTagsList"
              :key="index"
              :span="24"
              class="marginT10"
            >
              <el-checkbox :checked="item.disable" :disabled="(item.disable&&!checkedVal)||(checkedVal&&checkedVal.k!==item.tagsName)" :label="item" name="keynote">{{ item.tagsName }}
              <template v-if="!item.isSys">
              <el-button class="fr pad" @click="editModel('importTags',item.tagsId)">修改</el-button>
              <el-button class="fr pad" @click="delItem('importTags',item.tagsId)">删除</el-button>
              </template>
              </el-checkbox>
            </el-col>
          </el-checkbox-group>

          </el-col>
          <el-col
            :span="12"
            :offset="0"
            style="height: 340px; padding: 20px 0; overflow-y: auto; border-right: 1px solid #ccc;"
          >
            <el-checkbox-group v-if="ByPMapperList.length" v-model="abilityArr" @change="checkboxChange">
              <el-col
                v-for="(item, index) in ByPMapperList"
                :key="index"
                :span="24"
                class="marginT10"
              >
                <el-checkbox :label="item" name="abilityArr">{{ item.tagsName }}
                <template v-if="!item.isSys">
                <el-button class="fr pad" @click="editModel('ByPMapper',item.tagsId)">修改</el-button>
                <el-button class="fr pad" @click="delItem('ByPMapper',item.tagsId)">删除</el-button>
                </template>
                </el-checkbox>
              </el-col>
            </el-checkbox-group>
            <div v-else v-noData></div>
          </el-col>
        </el-col>
        <el-col :span="24" class="marginT20">
          <el-col :span="11">
            <el-input v-model="keynoteValue" placeholder="输入自定义重点内容">
              <el-button
                slot="append"
                type="primary"
                @click="getAddContentTags(null,'IMPORTANT', keynoteValue)"
              >添加</el-button>
            </el-input>
          </el-col>
         <el-col :span="11" :offset="2">
            <el-input v-model="abilityValue" placeholder="输入自定义能力提升点">
              <el-button
                slot="append"
                type="primary"
                @click="getAddContentTags(indTagesId,'ABILITY_ENHANCEMENT',abilityValue)"
              >添加</el-button>
            </el-input>
          </el-col>
        </el-col>
      </div>
      <div slot="footer" class="dialog-footer t-left">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" @click="next(false)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { findImportTagsList, findByPMapper, addContentTags,editTags,delTagsId} from '@/api/tags';


export default {
  name: 'TagsDialog',
  props: ['list', 'dialogVisible','ByPMapperList','importTagsList','checkedVal','tagsList','checkKeynote','checkAbilityArr','growthClassify'],
  data () {
    return {
      listData: this.list,
      keynote: [], // 重难点选项
      indKey:0,
      keynoteObj:{},
      abilityArr: [], // 内容提升选项
      keynoteValue: '',
      abilityValue:'',
      // importTagsList: [],
      // ByPMapperList:[]

    };
  },
  computed: {
    // dialogVisible:{
    //   get(){
    //   },
    //   set(){
    //   }
    // }
  },
  updated(){

  },
  watch: {
    checkKeynote(val){
      this.keynote = val
    },
    checkAbilityArr(val){
      this.abilityArr = val
    },
    ByPMapperList(val){
      //禁掉选择已选择过的标签分类
       var that = this
       var val = this.tagsList
       if(Array.isArray(val)){

          val.map((vlist)=>{
              for(var k in vlist){
                that.importTagsList.map((list,i)=>{
                //  console.log("asdas ",k,list.tagsName)
                   if(k==list.tagsName){
                    return this.$set(list,'disable',true)
                   }
                })
            }
       })
       }
    },
    checkedVal(val){ //回选
        if(val){
           //this.keynote =  val.tagkey
           this.keynote = this.importTagsList.filter(item=>item.tagsName===val.k)
           //this.abilityArr =  val.tagkey
           this.hasChange = true
        }
    },
    dialogVisible (newName, oldName) {
     // this.tagsDialogVisible = newName;
      if(oldName!==newName&&!this.checkedVal){
        this.keynote = []
        this.abilityArr = []
        this.keynoteObj = {}
      }
      if(!newName){
        this.$emit('update:checkedVal',null) //完成 标签编辑修改状态
      }
      //this.$emit('update:tagsDialogVisible', oldName)
    },
    keynote(val,oldVal){
      this.$emit('update:keynote',val)
      if(val.length){
         this.indTagesId =val[val.length - 1 ].tagsId

         if(this.checkedVal){
          // this.abilityArr = this.checkedVal.tagkey
         }
         if(val!==oldVal){
           this.$emit('changeImportCheckBox',val[val.length - 1 ])
         }
      }


    },
    abilityArr(val){

      if(val.length){
         this.indTagesId = val[val.length - 1 ].tagsId
      }
      if(this.keynote.length>1){
        this.$emit('update:abilityArr',val)
      }
    }
  },
  created () {
   console.log('listData:', this.listData);
    //this.getFindImportTags();
  },
  methods: {
    editModel(fnName,tagsId){
      this.$prompt('请输入标签名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputErrorMessage: '标签不能为空'
              }).then(async({ value:tagsName }) => {
                if(tagsId){
                  await editTags({tagsId,tagsName,tagsTypeEnum:'CATEGORY_TAGS'})
                  //that['edit'+fnName](fnName,tagsId,value)
                  const dataInfo = fnName+'List'
                  this[dataInfo].map(items=>{
                    if(items.tagsId === tagsId){
                     return items.tagsName = tagsName
                    }
                  })
                }else{
                  //修改栏目或者分类标签
                  //that.editColumnListSub(tagsId,value)
                }
              }).catch(() => {
              });
    },
    delItem(dataInfo,tagsId){
      this.$confirm('您确定要删除该标签').then(async()=>{
         const res = await delTagsId({tagsId})
         if(res.code==='1'){
           //this[dataInfo+'List'] =
           this.$emit('update:'+dataInfo+'List', this[dataInfo+'List'].filter(item=>item.tagsId!== tagsId ))
         }
        done();
      })

    },
    delimportTags(){

    },
    delByPMapper(){

    },
    radioChange (item,val) {
      console.log(item,val);
      if(!item.length) return this.keynote = [] ;
      let items = item[item.length-1]
      //this.$emit('getFindByPMapper:updata',items.tagsId)
     // this.getFindByPMapper(items.tagsId);
      this.indKey = items.tagsName
      //this.$emit('keynote',item)
      //this.$emit('changeImportCheckBox',items)
    },
    checkboxChange (item) {
      console.log(item);
      //this.keynoteObj[this.indKey] = item
     // this.$emit('abilityArr',item)
    },

    // 能力提升
    getFindByPMapper (id) {
      var data = {
        pMapperTagsId: id
      };
      findByPMapper(data).then(res => {
        this.ByPMapperList = res.data;
        // this.$emit('ByPMapperList:update',res.data)
        console.log('ByPMapperList:', res.data);
      });
    },

    // 新增内容标签
    getAddContentTags (mapperPTagsId, tagsGroupEnum, tagsName) {
      //
      var data = {
        ...this.growthClassify,
        mapperPTagsId: mapperPTagsId,
        pTagsId: null,

        tagsGroupEnum: tagsGroupEnum,
        tagsName: tagsName
      };
      addContentTags(data).then( (res) => {
        if (tagsGroupEnum === 'IMPORTANT') {
          this.importTagsList.push({tagsId:res.data,tagsName});
          this.keynoteValue = '';
          findImportTagsList({"tagsGroupEnum":"IMPORTANT"}).then((ress)=>{
             this.$emit('update:importTagsList', ress.data)
          })
        }
        if (tagsGroupEnum === 'ABILITY_ENHANCEMENT') {

          this.ByPMapperList.push({tagsId:res.data,tagsName});
          this.abilityValue = '';
        }
      });
    },
    next (status) {
    this.$emit('update:dialogVisible',status)
      let {keynote,keynoteObj,abilityArr } = this

      keynote.map(items=>{
        keynoteObj[items.tagsName] = []
        abilityArr.map(list=>{
          keynoteObj[items.tagsName].push(list)
        })
      })


       var obj = {
         dialogVisible: status,
         val:keynoteObj,
         edit:this.checkedVal,
         that:this
       };
       this.$emit('Callback', obj);
      // this.hasChange = null

    },
    handleClose (done) {
      //
     // this.dialogVisible = false;
      // var obj = {
      //   dialogVisible: false,
      //   val:this.keynoteObj
      // };
     // this.$emit('Callback', obj);
      this.$emit('update:dialogVisible',false)
     // done();
    }
  },
  }
</script>
<style lang="scss" scoped>
.tag-dialog{
  width: 100%;
  .content{
    height: 547px;
    overflow: hidden;
    border-bottom: 1px solid #e2e2e2;
    .parent{
      float: left;
      width: 50%;
      // overflow-y: scroll;
      .tag-list{
        border-right: 1px solid #e2e2e2;
      }
    }
    .child{
      float: left;
      width: 50%;
      // overflow-y: scroll;
    }
    .title{
      font-size: 16px;
      color: rgba(0,0,0,.65);
      line-height: 24px;
      border-bottom: 1px solid #e2e2e2;
      padding: 12px;
    }
    .tag-list{
        width: 100%;
        height: 547px;
        overflow-y: auto;
        .tag{

          .tag-name{
            display: inline-block;
            width: 440px;
          }
        }
      }
  }
}


/deep/.el-checkbox{
  .el-checkbox__label{
    line-height: 32px;
  }
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  font-size: 14px;
  line-height: 32px;
  padding:5px 13px;
  color: rgba(0,0,0,.45);
  .el-checkbox__inner{
    border-color: #9fa1a5;
  }
  .el-checkbox__label{
    float: left;
    width:calc(100% - 30px);
    .el-button{
      margin-right:5px;
    }
    min-width: 100px;
  }
}

/deep/.el-checkbox__inner::after{
  top:4px;
  left: 7px;
  height: 7px;
}
/deep/.el-checkbox__inner,/deep/.el-radio__inner{
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

/deep/label{
  font-weight: 500;
}
</style>
